<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉菜单</title>
    <script src="https://unpkg.com/vue@next"></script>
    <style>
        .header-left{
            float: left;
            margin-left: 180px;
        }
        .header-right{
            margin-right: 25px;
        }
        .header-right>img{
            margin-top: 20px;
            margin-left: 290px;
        }
        .header-right>p{
            
            font-size: 12px;
        }
        .header-right>p>a{
            color: #eb131e;
        }
        .header-left>img{
            position: relative;
            top: 20px;
        }
        .button1{
            background-color: #EB131E;
            color: #ffffff;
        }
        .sherchBox{
            position: relative;
            right: -150px;
        }

        ul,li{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        .nav{
            margin-top: 50px;
            height: 100px;
            background-color: #e90c19;
        }
        .nav-list {
            width: 1024px;
            margin: 0 auto;
        }
        .nav-list li{
            float: left;
        }
        .nav-list li a{
            float: left;
            color: #fff;
            height: 70px;
            width: 113px;
            text-align: center;
            font-size: 20px;
            padding: 30px 0 0;
            font-weight: bold;
        }
        .nav-list li a:hover{
            background-color: #cf2913;
        }
        .nav-list .subMenu{
        width: 113px;
        background: #ed1d24;;
        margin-left: 0;
        margin-top: 90px;
        position: absolute;
        z-index: 1000;
        padding: 10px 0;
        }
    </style>
</head>
<body>
    <div id="app"></div>
    <template id="root">
        <div align="center">
            <div class="header-left">
                <img src="https://www.hongyan.info/Public/style/lihong/images/public/logo.png">
            </div>
            <div class="header-right">
                <img src="https://www.hongyan.info/Public/style/lihong/images/public/icon-18.png">
                <p>
                    <a href="#">设为首页</a>|
                    <a href="#">加入收藏</a>|
                    <a href="#">热线:023-65312300(沙坪坝地区)023-63303457(渝中片区)</a>|
                    <a href="#">English</a>
                </p>
                <div class="sherchBox">
                    <input type="text" placeholder="请输入搜索关键词">
                    <button class="button1">搜索</button>
                </div>
                
            </div>
        </div>

        <div class="nav">
            <ul class="nav-list">
                <li v-for="menu in menus" @mouseover="menu.show=!menu.show" @mouseout="menu.show=!menu.show">
                    <a :href="menu.url">
                        {{menu.name}}
                    </a>
                    <ul v-show="menu.show" class="subMenu">
                        <li v-for="subMenu in menu.subMenus">
                            <a :href="subMenu.url">{{subMenu.name}}</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </template>
    <script>
        const app =Vue.createApp({
            template:"#root",
            data(){
                return {
                    menus:[
                        {name:'首页',url:'#'},

                        {name:'关于红岩',url:'#',subMenus:[
                            {name:'红岩文化',url:'#',},
                            {name:'博物馆机构',url:'#',},
                            {name:'历史沿革',url:'#',},
                        ]},
                        {name:'公告动态',url:'#',subMenus:[
                            {name:'文博信息',url:'#',},
                            {name:'政务平台',url:'#',},
                            {name:'公告',url:'#',},
                            {name:'专题报道',url:'#',},
                        ]},
                        {name:'馆藏精品',url:'#',subMenus:[
                            {name:'一级文物',url:'#'},
                            {name:'二级文物',url:'#'},
                            {name:'三级文物',url:'#'}
                        ]},
                        {name:'陈列展览',url:'#',subMenus:[
                            {name:'虚拟展览',url:'#',},
                            {name:'基本陈列',url:'#',},
                            {name:'复原陈列',url:'#',},
                            {name:'临时展览',url:'#',},
                            {name:'展览交流',url:'#',},
                        ]},
                        {name:'研究开发',url:'#',subMenus:[
                            {name:'历史研究',url:'#',},
                            {name:'艺术创作',url:'#',},
                            {name:'影音在线',url:'#',},
                            {name:'文创产品',url:'#',},
                        ]},
                        {name:'公共教育',url:'#',subMenus:[
                            {name:'党性教育',url:'#',},
                            {name:'爱国主义教育',url:'#',},
                            {name:'研学实践教育',url:'#',},
                            {name:'科普教育',url:'#',},
                        ]},
                        {name:'参观服务',url:'#',subMenus:[
                            {name:'景点介绍',url:'#',},
                            {name:'服务内容',url:'#',},
                            {name:'网上预约',url:'#',},
                            {name:'志愿服务',url:'#',},
                        ]},
                        {name:'网上预约',url:'#',},
                    ]
                }
            },
        })
        app.mount('#app')
    </script>
</body>
</html>